<template>
  <div class="box">
    <CategoryHeadVue them ="商品分类"></CategoryHeadVue>
    <main>
      <CategorySidebarVue></CategorySidebarVue>
      <div class="right">
        <van-grid>
        <van-grid-item icon="photo-o" :text="item.brand"  v-for = "(item,index) in brandname" :key = "index" @click="leap(item)"/>
      </van-grid>
      </div>
    </main>
    <FooterVue></FooterVue>
  </div>
</template>

<script>
import FooterVue from '@/components/Footer.vue';
import CategoryHeadVue from '@/components/Category-head.vue';
import CategorySidebarVue from '@/components/Category-sidebar.vue';
export default {
    data(){
      return {
        brandname:[],
        categoryname:'手机'
      }
    },
   name : "category-vue",
   components:{
     FooterVue,
     CategoryHeadVue,
     CategorySidebarVue,

   },
   methods:{
   
    leap(n){
      this.$router.push(`/Result/${this.categoryname}/${n.brand}`)
      
    }
   }
}
</script>

<style scoped>
 .box{
  display: flex;
    flex-direction: column;
 }
 main{
  flex: 1;
  overflow: auto;
  background-color: white;
  display: flex;
 }
.right{
  flex: 1;
}
</style>